<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>使用jQuery修改表格</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
			/*189000526 谭静*/
			function addRow(){
				var newRow = $('<tr></tr>');//创建行节点
				$('<td>幸福从天而降</td>').appendTo(newRow);
				$('<td style = "text-align:center;">&yen;18.50</td>').appendTo(newRow);//在创建单元格的同时，把单元格添加到行节点中
				$("#row2").after(newRow);//把行节点添加到表格末尾 
			}

			function updateRow() {
				$("#row1").css({
					//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
					fontWeight:'bold',
					textAlign:'center',
					backgroundColor:'#cccccc'
				});
			}

			function delRow() {
				if($("#myTable tr:eq(2)")!==null){
					$("#myTable tr:eq(2)").remove(); //删除行
				}else{
					alert("不能再删啦！");
				}
				
			}
			function copyRow() {
				var newRow = $("#row3").clone(true); //访问复制的行，复制指定的行及子节点
				$("#myTable").append(newRow);//在指定节点的末尾添加行
			}			
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()"/>
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

	</body>

</html>